<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				基础信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">快递方式：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">询价客户：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">邮箱：</span>
						<el-input disabled class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">手机号：</span>
						<el-input disabled class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">公司电话：</span>
						<el-input disabled class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">订单编号：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">PO编号：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">定金日期&比例：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入">
							<template #append>%</template>
						</el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">收款银行&币种：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入">
							<template #append>%</template>
						</el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">定金支付水单金额：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">未付余额金额：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">订单类型：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">未付余额金额：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">照片素材：</span>
						<el-upload class="avatar-uploader"
							action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload" :limit="5">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">成交条款以及运费：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">折扣：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">完工天数：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">付款条件：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">剩余交期：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">预计完工日期：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">设备类型：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				订单产品技术要求细节
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">说明：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">上批质量反馈：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">材质要求(公司)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">材质要求(客户)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">铸字标识(公司)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">铸字标识(客户)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">油漆要求(公司)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">油漆要求(客户)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">包装要求(公司)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">包装要求(客户)：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">其他要求：</span>
						<el-input type="textarea" :rows="3" class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				合同附件
			</div>
			<div class="mt-[20px] v-flex v-col-top main-color">
				<span class="w-[150px] text-right">合同文件：</span>
				<el-upload v-model:file-list="fileList" class="upload-demo"
					action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange" :limit="1">
					<el-button>上传文件</el-button>
					<template #tip>
						<div class="el-upload__tip">
							支持扩展名：.rar、.zip、.doc、.docx、.pdf、.jpg
						</div>
					</template>
				</el-upload>
			</div>
			<div class="mt-[20px]  main-color v-flex v-col-top">
				<span class="w-[150px] text-right">附件信息：</span>
				<div>
					<el-upload v-model:file-list="fileList" class="upload-demo"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange" :limit="1">
						<el-button>上传文件</el-button>
						<template #tip>
							<div class="el-upload__tip">
								支持扩展名：.rar、.zip、.doc、.docx、.pdf、.jpg
							</div>
						</template>
					</el-upload>
					<el-button class="w-[100px]  h-[36px] mt-[20px]" color="#0054A6" type="primary">
						<span>+附件</span>
					</el-button>
				</div>
			</div>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品信息
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品图片" prop="scene_name" align="center" >
					<template #default="{ row }">
						<el-image style="width: 48px; height: 48px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'" fit="cover" />
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="超级好吃的巧克力" align="center"  />
				<el-table-column label="库存" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="需求数量" prop="王小明" align="center" />
				<el-table-column label="成交价" prop="待报价" align="center" />
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link >
							<router-link :to="{
							        path: getRoutePath('InquiryManagement.InquiryManagement/inquiryDetails'),
							        query: {
							            id: '1'
							        }
							    }">
								<span class="main-color1">查看报价</span>
							</router-link>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-table class="mt-[20px]" size="large" :data="list"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="总重量" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>32000</span>
					</template>
				</el-table-column>
				<el-table-column label="总金额" prop="超级好吃的巧克力" align="center"  />
				<el-table-column label="总托数" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="预估总体积(方)" prop="王小明" align="center" />
			</el-table>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">保存</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	import type { UploadProps , UploadUserFile} from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {

		return true
	}
	const fileList = ref<UploadUserFile[]>([
	  {
	    name: 'food.jpeg',
	    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
	  }
	])
	const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
	  fileList.value = fileList.value.slice(-3)
	}
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		},
	])
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
	const list = ref<Array<any>>([
		{}
	])
</script>

<style scoped lang="scss">
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
	}
</style>